<template>
  <el-container>
    <el-header class="top-title">
      <vHeader></vHeader>
    </el-header>
    <el-container class="zfjd_centent">
      <div ref="leftSidebar" class="index_left_aside" :class="{ 'active': isShow }">
        <vAside></vAside>
        <div class="sidebarBtn" @click.stop="toggleMenu"></div>
      </div>
      <el-container>
        <el-main class="index_main">
          <vMain></vMain>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import api from "./api.js";
import vHeader from '@/components/header'
import vAside from '@/components/aside'
import vMain from '@/components/main'

export default {
  name: 'App',
  components: {
    vHeader,
    vAside,
    vMain
  },
  data() {
    return {
      isShow: false,
      userId: "",
    }
  },
  watch: {
    userId(value) {
      let params = {
        userId: value
      }
      api.getUserInfo(params, res => {
        if (res.data.content && res.data.statusCode == "API-COMMON-INF-OK") {
          let userData = JSON.stringify(res.data.content)
          sessionStorage.setItem("userData", userData);
        }
      })
    },
  },
  beforeRouteEnter(to, from, next) {
    if (to.fullPath.indexOf('?') > -1) {
      
      next((vm) => {
        let sUserId = vm.uncompileStr(to.query.sUser);
        console.log('sUserId',sUserId)
        //这时vm相当于平时同时通过this获得的实例对象
        vm.$data.userId = sUserId;//修改数据
        sessionStorage.setItem("userId", sUserId);
        this.isShow = false
        next(to.path)
      });
    } else {
      next()
    }
  },
  created() {
    document.addEventListener('click', (e) => {
      if (this.$refs.leftSidebar) {
        let isSelf = this.$refs.leftSidebar.contains(e.target)
        if (!isSelf) {
          this.isShow = false
        }
      }
    })
  },
  methods: {
    // 字符串进行解密
    uncompileStr(code) {
      code = unescape(code);
      var c = String.fromCharCode(code.charCodeAt(0) - code.length);
      for (var i = 1; i < code.length; i++) {
        c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1));
      }
      return c;
    },
    toggleMenu() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style>
.index_left_aside {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 218px;
  height: 100%;
  transition: transform .5s;
  transform: translateX(-217px);
}

.index_left_aside.active {
  transform: translateX(0);
}

.index_left_aside .sidebarBtn {
  position: absolute;
  top: 105px;
  right: -22px;
  cursor: pointer;
  z-index: 2;
  width: 21px;
  height: 126px;
}
</style>
